<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>购物车</title>
    <meta charset="utf-8" name="keywords" content="{{.system.keywords}}" />
    <meta charset="utf-8" name="description" content="{{.system.description}}" />
    <link rel ="shortcut Icon" href="{{.system.pathname}}">
    <link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/css/index.min.css?v=123" />
    <link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/css/pc/pcbase.css" />
    <link rel="stylesheet" type="text/css" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/font/iconfont.css">
    <link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/css/xcConfirm.css">
    <link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/css/toast.css" />
    <style>
      .cart tr td{position: relative;}
      .cart tr td .p{position: absolute; bottom: 20px;width: calc(100% - 20px);font-size: 12px !important;color: #999 !important}
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
          -webkit-appearance: none;
      }
      input[type="number"]{
          -moz-appearance: textfield;
      }
      .collected{background: #ccc !important;cursor: default !important;}
    </style>
  </head>

<body>
  <!--from fragment-->
  {{template "pc/public/head.html" .}}
  {{template "pc/public/search.html" .}}
  <div class="cart">
    <table>
      <tr>
        <th><input type="checkbox" class="choseAll">全选</th>
        <th>商品信息</th>
        <th>单价</th>
        <th>数量</th>
        <th>操作</th>
      </tr>
      {{range .info}}
      <tr>
        <th colspan="5" align="left" style="padding-left: 15px;"><a href="/shop?id={{.gid}}"><span class="mui-icon iconfont fs-16">&#xe75f;</span> {{if .shop}}
          {{.shop.name}}
          {{else}}
          {{$.system.name}}
          {{end}}</a>
        </th>
      </tr>
      {{range .shopcar}}
      <tr id="{{.id}}" class="tr">
        <td><input type="checkbox" class="chosePrd"></td>
        <td>
          <img src="{{.pathname}}">
          <p>{{.title}}</p>
          <p>装箱数:{{.number}}</p>
          <p>型号:{{.model}}</p>
          <p>单价:&yen;{{.priceone}}</p>
        </td>
        <td>&yen; <span class="shopcarmoney">{{.pricem}}</span>/{{if eq .spec "1"}}件{{else}}箱{{end}}</td>
        <td>
          <span class="cartLess" data-min="{{if .min}}{{.min}}{{else}}{{.minbuy}}{{end}}">-</span>
          <span><input type="number" class="amount" data-min="{{if .min}}{{.min}}{{else}}{{.minbuy}}{{end}}" value="{{.num}}" data-width="{{.width}}" data-length="{{.length}}" data-height="{{.height}}" data-weight="{{.weight}}" data-number="{{.number}}"></span>
          <span class="cartPlus">+</span>
          {{if gt .minbuy "1"}}
          <p class="p">最小购买为{{.minbuy}}</p>
          {{end}}
        </td>
        <td>
          {{if eq .iscollect 1}}
          <button disabled="" class="collected">已收藏</button>
          {{else}}
          <button class="collect" data-id="{{.pid}}">收藏</button>
          {{end}}
          <button class="del">删除</button>
        </td>
      </tr>
      {{end}}
      {{end}}
    </table>
    <style type="text/css">
      .cartBtn div{width: 50%;float: left;text-align: left;padding-left: 10px;}
      .cartBtn div>span{margin-right: 10px}
      .cartBtn div>span span{color: #e54242}
    </style>
    <div class="cartBtn">
      <div><span>总计重量：<span class="allw">0.00</span>千克</span>
      <span>总计体积：<span class="allv">0.00</span>立方</span>
      <span>总计箱数：<span class="allNum">0.00</span>箱</span></div>
      <span>商品总价：&yen;<span class="allPrice">0.00</span></span>
      <button class="buildOrder">立即下单</button>
    </div>
  </div>
{{template "pc/public/foot.html" .}}
</body>
<!-- <script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/js/pccart.js"></script> -->
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/js/jquery.min.js"></script>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/admin/js/xcConfirm.js"></script>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/js/toast.js"></script>
<script type="text/javascript">
  function allPrice(){
    var choose=$('.chosePrd');
    var money=$('.shopcarmoney');
    var num=$('.amount');
    var allnum=0
    var allmoney=0.00;
    var vlume=0.00;
    var weit=0.00
    for(var i=0;i<choose.length;i++){
      if($(choose[i]).prop('checked')){
        allmoney+=parseFloat($(money[i]).html())*parseFloat($(num[i]).val())
        allnum+=parseInt($(num[i]).val())
        var width=$(num[i]).attr('data-width')
        var length=$(num[i]).attr('data-length')
        var height=$(num[i]).attr('data-height')
        var weight=$(num[i]).attr('data-weight')
        var number=$(num[i]).attr('data-number')
        var nums=$(num[i]).val()
        // console.log(num)
        var vone=parseFloat(width)*parseFloat(length)*parseFloat(height)*parseFloat(nums)/1000000
        var w=parseFloat(weight)*parseFloat(number)*parseFloat(nums)/1000
        vlume+=vone
        weit+=w
      }
    };
    $('.allPrice').html(allmoney.toFixed(2))
    $('.allNum').html(allnum)
    $('.allv').html(vlume.toFixed(2))
    $('.allw').html(weit.toFixed(2))
  };
  allPrice();
  $('.chosePrd').click(function(){
    var check=true;
    var choose=$('.chosePrd');
    for(var i=0;i<choose.length;i++){
      if(!$(choose[i]).prop('checked')){
        check=false;
        break;
      }
    };
    $('.choseAll').prop('checked',check)
    allPrice();
  });
  $('.choseAll').click(function(){
    var check=$(this).prop('checked');
    console.log(check);
    var choose=$('.chosePrd');
    if(check){
      for(var i=0;i<choose.length;i++){
        $(choose[i]).prop('checked',true)
      };
    }else{
      for(var i=0;i<choose.length;i++){
        console.log(i)
        $(choose[i]).prop('checked',false)
      };
    };
    allPrice();
  });
  $('.amount').change(function(){
    var num=$(this).val();
    var min = $(this).attr("data-min")
    num = num < min ? min : num
    $(this).val(num)
    var id=$(this).parent().parent().parent().attr('id');
    $.ajax({
      url:'/shopcar/changenum',
      data:{id:id,num:num},
      success:function(res){
        if(res==962){
          window.location.href="/login";
        }else if(res==1){
          allPrice();
          }else if(res==3){
          showToast('库存不足');
        }else{
          showToast('网络繁忙,请重试');
        };
      }
    });
  });
  $('.cartLess').click(function(){
    var num=$(this).siblings().find('input').val();
    var id=$(this).parent().parent().attr('id');
    var that=$(this)
    if(parseInt(num)>$(this).attr("data-min")){
      num=parseInt(num)-1;
      $.ajax({
        url:'/shopcar/changenum',
        data:{id:id,num:num},
        success:function(res){
          if(res==962){
            window.location.href="/login";
          }else if(res==1){
            that.siblings().find('input').val(num);
            allPrice();
            }else if(res==3){
          showToast('库存不足');
          }else{
            showToast('网络繁忙,请重试');
          };
        }
      });
    }
  });
  $('.cartPlus').click(function(){
    var num=$(this).siblings().find('input').val();
    var id=$(this).parent().parent().attr('id');
    var that=$(this)
    num=parseInt(num)+1;
    $.ajax({
      url:'/shopcar/changenum',
      data:{id:id,num:num},
      success:function(res){
        if(res==962){
          window.location.href="/login";
        }else if(res==1){
          that.siblings().find('input').val(num);
          allPrice();
        }else if(res==3){
          showToast('库存不足');
        }else{
          showToast('网络繁忙,请重试');
        };
      }
    });
  })
  $('.del').click(function(){
    var id=$(this).parent().parent().attr('id')
    wxc.xcConfirm("您确定要删除吗?","confirm",{onOk:function(){
      $.ajax({
        url:'/del',
        data:{table:'mt_order_car',id:id},
        type:'get',
        success:function(res) {
          if(res==1){
            showToast('删除成功');
            $('#'+id).remove()
            allPrice();
          }else{
            showToast('网络繁忙,请重试');
          }
        }
      })  
    }});
  })
  $('.buildOrder').click(function(){
    var cids=[]
    var choose=$('.chosePrd');
    for(var i=0;i<choose.length;i++){
      console.log($(choose[i]).prop('checked'))
      if($(choose[i]).prop('checked')){
        cids.push($(choose[i]).parent().parent().attr('id'))
      }
    }
    if(cids.length==0){
      showToast('请选择商品')
    }else{
      window.location.href="/shopcar/sure?cid="+cids.join(",")
    }
  })
  $('.collect').click(function(){
    var id=$(this).attr('data-id')
    var that=$(this)
    console.log(id)
    $.ajax({
      url:'/column/prduct_collect',
      data:{id:id},
      type:'post',
      success:function(res){
        if(res==1){
          showToast('收藏成功')
          that.html('已收藏')
          that.attr('class','collected')
          that.prop('disabled',true)
        }else{
          showToast('网络繁忙,请重试');
        }
      }
    })
  })
  // document.querySelector(".buildOrder").onclick = function(){
  //   console.log(pids)
  // }
  // function changeAmount(amount,id){
  //   console.log("数量 => "+amount)
  //   console.log("ID => "+id)
  // }

</script>
</html>